<template>
	<div>
		<el-form :inline='true'
		>
			<el-form-item>
				<el-input
				v-model='searchForm.name'
				placeholder="名称"
				clearable></el-input>
			</el-form-item>
			<el-form-item class="wd">
				<el-button type='primary' @click="goUserList()"> 搜索</el-button>
			</el-form-item>
			<el-form-item class="wd">
				<el-button type="primary" @click="centerDialogVisibl=true" v-if="hasAuth('sys:user:save')"> 新增</el-button>
			</el-form-item>
			<el-form-item>
				<el-popconfirm title="确定删除这条记录吗?" @confirm="">
				    <template #reference>
				      <el-button type="danger" slot="refernce" :disabled='delBtlStatu'>一键删除</el-button>
				    </template>
				  </el-popconfirm>
			</el-form-item>
		</el-form>
		
		  <el-table
		    ref="multipleTableRef"
		    :data="tableData"
		    style="width: 100%"
		    @selection-change="handleSelectionChange"
			torder
			stripe
		  >
		    <el-table-column type="selection" :selectable="selectable" width="55" />
		    
		    <el-table-column  label="头像" width="55" >
				<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
			</el-table-column>
			<el-table-column prop="username" label="用户名" width="120"  />
		    <el-table-column prop="code" label="角色名称" width="120" > 
				<template v-slot="scope"  >
					<el-tag size="small" type="info" v-for="item in scope.row.roles">{{item.name}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="email" label="邮箱" />
			<el-table-column prop="phone" label="手机号" />
			<el-table-column prop="created" width="200" label="创建时间" />
			<el-table-column
				prop="statu"
				label="状态"
				
			>
				<template v-slot="scope">
					<el-tag size="text" v-if="scope.row.statu ===1" type="success"> 正常</el-tag>
					<el-tag size="text" v-else-if="scope.row.statu ===0" type="danger"> 禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column
								prop="icon"
								width="260px"
								label="操作">
			
							<template v-slot="scope">
								<el-button type="text" @click="roleHandle(scope.row.id)">分配角色</el-button>
								<el-divider direction="vertical"></el-divider>
			
								<el-button type="text" @click="repassHandle(scope.row.id, scope.row.username)">重置密码</el-button>
								<el-divider direction="vertical"></el-divider>
			
								<el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
								<el-divider direction="vertical"></el-divider>
			
								<el-popconfirm title="确定删除这条记录吗?" @confirm="delhandle(scope.row.id)">
								    <template #reference>
								      <el-button size="text" slot="reference">删除</el-button>
								    </template>
								  </el-popconfirm>
			
							</template>
						</el-table-column>
		  </el-table>		  
		  <div style="margin-top: 20px">
		    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
		      Toggle selection status of second and third rows
		    </el-button>
		    <el-button @click="toggleSelection([tableData[1], tableData[2]], false)">
		      Toggle selection status based on selectable
		    </el-button>
		    <el-button @click="toggleSelection()">Clear selection</el-button>
		  </div>
			<el-pagination
			      v-model:current-page="current"
			      v-model:page-size="pageSize4"
			      :page-sizes="[10, 20,50, 100]"
			      :size="size"
			      :disabled="disabled"
			      :background="background"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			    />
				<el-dialog
				  v-model="centerDialogVisibl"
				  title="title"
				  width="500"
				  :before-close="handleClose"
				  align-center
				>
					<el-form 
					ref="editFormRef"
					style="max-width: 600px"
					:model="editForm"
					:rules="editFormRules"
					label-width="auto"
					class="demo-editForm"
					:size="formSize"
					status-icon
					>
									<el-form-item label="用户名" prop="username" label-width="100px">
										<el-input v-model="editForm.username" autocomplete="off"></el-input>
										<el-alert
												title="初始密码为888888"
												:closable="false"
												type="info"
												style="line-height: 12px;"
										></el-alert>
									</el-form-item>
									<el-form-item label="邮箱"  prop="email" label-width="100px">
										<el-input v-model="editForm.email" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="手机号"  prop="phone" label-width="100px">
										<el-input v-model="editForm.phone" autocomplete="off"></el-input>
									</el-form-item>
									<el-form-item label="状态" prop="statu" label-width="100px">
									     
									       <el-radio-group v-model="editForm.statu">
									         <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
									         <el-radio :label="0">禁用</el-radio>
									         <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
									         <el-radio :label="1">正常</el-radio>
									       </el-radio-group>
									</el-form-item>
									
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="resetForm('editForm')">取 消</el-button>
									<el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
								</div>	
								
					 
				</el-dialog>
				
	</div>
</template>
<script setup>
	import globals from 'globals'
	import axios from 'axios';
	import { valid } from 'mockjs';
	import { useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	import { reactive,getCurrentInstance,ref} from 'vue';
	import store from '/src/store'
	const hasAuth=(perm)=>{
		let authoritys =store.state.menus.permlist
		console.log(authoritys)
		return true
	}
	const searchForm=reactive({})
	let centerDialogVisibl=ref(false)
	const {proxy} = getCurrentInstance()
	let multipleTable=ref([])
	let delBtlStatu=ref(true)
	const perform=reactive({})
	const toggleSelection=(rows)=>{
		if(rows){
			rows.forEach(row=>{
				multipleTable.toggleSelection(row)
			})	
		}else{
			multipleTable.clearSelection()
		}
	}
	const handleSelectionChange=(val)=>{
		multipleTable=val
		
		delBtlStatu.value=val.length==0
	}
	const handleSizeChange = (val) => {
		size.value=val
	}
	const handleCurrentChange = (val) => {
		current.value=val
	}
	const defaultProps=reactive({
		clildern:'clidern',
		label:'name'
	})
	let percenterDialogVisible=ref(false)
	let total=ref()
	let size=ref()
	let current=ref()
	const editForm=reactive({})
	const tableData=reactive([])
	let perTreeData=ref([])
	 const editFormRules= {
						username: [
							{required: true, message: '请输入用户名称', trigger: 'blur'}
						],
						email: [
							{required: true, message: '请输入邮箱', trigger: 'blur'}
						],
						statu: [
							{required: true, message: '请选择状态', trigger: 'blur'}
						]
					}
	const router=useRouter()
		let goUserList= async ()=>{
			
			try{
				return await axios.get('/sys/user/list',{
					name:searchForm.name,
					current:current,
					size:size
					
				}).then(res=>{
					// userifo=res.data.datan
					Object.assign(tableData,res.data.data.records)
					
					size.value=res.data.data.size
					current.value=res.data.data.current
					total.value=res.data.data.total
					
				}
					
				)
			}catch (e){
				return await e
			}
		}
	
		goUserList()
		
</script>

<style scoped>
	.wd{
		width: 35px;
	}
	
	
	
	.dialog-footer{
		float: right;
		margin-top: 20px;
	}
	.el-pagination {
		float: right;
	}
</style>